<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <button @click="person.age++">年龄加一岁</button><br /><br />
      <button @click="addSex">添加性别属性,默认男</button><br /><br />
      <button @click="updateSex">修改性别为女</button><br /><br />
      <button @click="addFirstFriend">在列表首位添加一个朋友</button
      ><br /><br />
      <button @click="updateFirstFriend">修改第一个朋友名字为张三</button
      ><br /><br />
      <button @click="addHobby">添加一个爱好</button><br /><br />
      <button @click="updateHobby">修改第一个爱好为开车</button><br /><br />
      <button @click="removeSmoke">移除抽烟</button>
      <h1>人员爱好</h1>
      <ul>
        <li v-for="(h,index) in person.hobby" :key="index">{{h}}</li>
      </ul>
      <h1>人员信息</h1>
      <h3>人员名称:{{person.name}}</h3>
      <br />
      <h3>人员年龄:{{person.age}}</h3>
      <br />
      <h3 v-if="person.sex">性别:{{person.sex}}</h3>
      <br />
      <h3>
        {{person.name}}的朋友们
        <ul>
          <li v-for="(f,index) in person.friends" :key="index">
            姓名:{{f.name}}--年龄:{{f.age}}
          </li>
        </ul>
      </h3>
    </div>

    <script>
      //创建Vue实例,得到 ViewModel
      const vm = new Vue({
        el: '#root',
        data: {
          person: {
            name: '小王',
            age: 18,
            hobby: ['喝酒', '抽烟', '烫头'],
            friends: [
              { name: '张三', age: 20 },
              { name: '李四', age: 30 },
            ],
          },
        },
        methods: {
          addSex() {
            // Vue.set(this.person, 'sex', '男')
            this.$set(this.person, 'sex', '男')
          },
          updateSex() {
            this.person.sex = '女'
          },
          addFirstFriend() {
            this.person.friends.unshift({ name: '王五', age: 25 })
          },
          updateFirstFriend() {
            this.person.friends[0].name = '李白'
            this.person.friends[0].age = 36
          },
          addHobby() {
            this.person.hobby.unshift('打球')
          },
          updateHobby() {
            this.person.hobby.splice(0, 1, '开车')
          },
          removeSmoke() {
            this.person.hobby = this.person.hobby.filter((h) => {
              return h !== '抽烟'
            })
          },
        },
        computed: {},
      })
    </script>
  </body>
</html>
